<template>
    <div class="panelsbox">
        <cube-scroll class="leftpanels">
            <ul>
                <li v-for="(item,index) in tabsLabel" :key="index" @click="selectList(index)" :class="item.active?'active':''">
                    {{item.label}}
                </li>
            </ul>
        </cube-scroll>
        <cube-scroll class="rightpanels">
            <ul>
                <li v-for="(item,index) in tags" :key="index">
                    <img :src="item.image" alt="">
                    <p>{{item.label}}<i class="cubeic-add" @click="addToCart($event,item)"></i></p>
                </li>
            </ul>
        </cube-scroll>
        <div class="ball-wrap">
            <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
                <div class="ball" v-if="ball.show">
                    <div class="inner">
                        <i class="cubeic-add"></i>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
export default {
    name:'List',
    data() {
        return {
            ball:{
                show:false,
                el:''
            },
            tags:[],//右边数据
            tabsLabel:[//左边数据
                {label:'热门推荐',active:true},
                {label:'手机数码',active:false},
                {label:'家用电器',active:false},
                {label:'家用空调',active:false},
                {label:'热门推荐',active:false},
                {label:'电脑产品',active:false},
                {label:'手机数码',active:false},
                {label:'电脑产品',active:false},
                {label:'家用空调',active:false},
                {label:'电脑产品',active:false},
                {label:'666',active:false},
                {label:'电脑产品',active:false},
                {label:'金银财宝',active:false},
                {label:'口红',active:false},
                {label:'美妆护肤',active:false},
            ],
        }
    },
    created() {
        // 获取默认的分类数据
        this.getClassify(0)
    },
    mounted() {
        const leftpanels=document.querySelector('.leftpanels')
        const rightpanels=document.querySelector('.rightpanels')
        const bodyHeight=document.documentElement.clientHeight
        leftpanels.style.height=bodyHeight-57+"px"
        rightpanels.style.height=bodyHeight-57+"px"
    },
    methods: {
        // 点击左边的label
        selectList(index){
            this.tabsLabel.forEach((val,i)=>{
                if(index==i){
                    val.active=true
                }else{
                    val.active=false
                }
            })
            this.getClassify(index)
        },
        // 获取数据
        async getClassify(index){
            const result=await this.$http.get('/api/classify',{params:{type:index}})
            this.tags=result.data
            console.log(this.tags)
        },
        // 加入购物车
        addToCart(e,tag){
            this.$store.commit('addToCart',tag)
            // 点击购物车让小球显示出来
            this.ball.show=true
            // 获取点击元素
            this.ball.el=e.target
            // console.log(this.ball.el)
        },
        beforeEnter(el){
            // console.log(el)//就是那个小球
            // 让小球移动到点击的位置
            // 获取点击位置
            const dom=this.ball.el
            const rect=dom.getBoundingClientRect()//获取点击的dom的位置
            // console.log(rect)
            const x=rect.left-window.innerWidth*0.71
            const y=-(window.innerHeight-rect.top)
            // console.log(x,y)
            el.style.display='block'
            el.style.transform=`translate3d(0,${y}px,0)`
            const inner=el.querySelector('.inner')
            inner.style.transform=`translate3d(${x}px,0,0)`
        },
        // 为什么用两个盒子做过渡，但是我用一个盒子又不行
        enter(el,done){
            // console.log(done)
            // 触发重绘
            document.body.offsetHeight
            // 小球回到原点
            el.style.transform=`translate3d(0,0,0)`
            const inner=el.querySelector('.inner')
            inner.style.transform=`translate3d(0,0,0)`
            // 过渡完成后执行的事件
            el.addEventListener('transitionend',done)
        },
        afterEnter(el){
            this.ball.show=false
            el.style.display='none'
        }
    },
}
</script>
<style lang="stylus" scoped>
.ball-wrap{
    .ball{
        position fixed
        left 71%
        bottom 30px
        z-index 99999
        color red
        transition all 1s cubic-bezier(0.49,-0.29,0.75,0.41)
        .inner{
            width 16px
            height 16px
            // transition all 1s linear 
        }
    }
}
.panelsbox{
    display flex
    text-align center
    .leftpanels{
        width 30%
        li{
            height 50px
            line-height 50px
            border-bottom 1px solid #fff
            color #333
            background #f8f8f8
            font-size 14px
        }
        .active{
            background #fff
            color #e93b3d
        }
    }
    .rightpanels{
        width 70%
        ul{
            display flex
            flex-wrap wrap
            li{
                width 50%
                justify-content center
                align-items center
                font-size 15px
                img{
                    width 80px
                    height 80px
                    .cubeic-add{
                        font-size 18px
                    }
                }
            }
        }
    }
}
</style>